

$(function() {
	
	// console.log($('.box .dt span'))
	// for () {	}
	
	// 使用jQuer操作数组元素，省去了循环遍历的操作
	/*$('.box .dt span').click(function() {
		// console.log(this) // 原生js对象
		// console.log($(this))
		// this.css("color", "red") // .css()是jQuery对象的方法
		$('.box .dt span').css("color", "#000")
		$(this).css("color", "red")
		
		const index = $(this).index() // 获取jQuery对象的下标
		$(`.card`).css("display", "none")
		$(`.card:eq(${index})`).css("display", "block")
	})*/
	
	/*
	$('.box .dt span').click(function() {
		$('.box .dt span').css({
			"color": "#000",
			fontSize: 16
		})
		$(this).css({
			"color": "red",
			fontSize: 30
		})
		
		const index = $(this).index()
		$(`.card`).css("display", "none")
		// $(`.card:eq(${index})`).css("display", "block")
		$(`.card`).eq(index).css("display", "block")
	})*/
	
	$('.box .dt span').click(function() {
		$(this).css({
			"color": "red",
			fontSize: 30
		}).siblings().css({
			"color": "#000",
			fontSize: 16
		})
		// console.log($(this).siblings()) // 除自己以外的同胞元素
		
		// const index = $(this).index()
		// $(`.card`).css("display", "none")
		// $(`.card:eq(${index})`).css("display", "block")
		$(`.card`).eq($(this).index()).css("display", "block").siblings().css("display", "none")
	})
})


